<script setup>
import RealTimeData from "../components/realTimeData.vue";
import CO2PieChart from "../components/CO2PieChart.vue";
import CO2LineGraph from "../components/CO2LineGraph.vue";
import Images from "../components/Images.vue";
import realMonitor from "../components/realMonitor.vue";
import FormData from "../components/formData.vue";
import TemperatureLineGrape from "../components/TemperatureLineGrape.vue";
import WaterBarChart from "../components/waterBarChart.vue";
import NLineGraph from "../components/NLineGraph.vue";

</script>

<template>
<div class="container">
  <div class="left">
    <div class="left_top">
      <RealTimeData />
    </div>
    <div class="left_mid">
      <CO2PieChart />
    </div>
    <div class="left_bottom">
      <CO2LineGraph />
    </div>
  </div>
  <div class="mid">
    <div class="mid_top">
      <Images />
    </div>
    <div class="mid_mid">
      <realMonitor />
    </div>
    <div class="mid_bottom">
      <FormData />
    </div>
  </div>
  <div class="right">
    <div class="right_top">
      <TemperatureLineGrape />
    </div>
    <div class="right_mid">
      <WaterBarChart />
    </div>
    <div class="right_bottom">
      <NLineGraph />
    </div>
  </div>
</div>
</template>

<style scoped>
.container{
  width: 100%;
  height: 100vh;
  display: flex;
  color: white;
  background-image: url('/大屏背景.png');
  background-size: cover; /* 使背景图像覆盖整个元素 */
  background-position: center; /* 使背景图像居中显示 */
}
.container .left{
  width: 30%;
  height: 100vh;
}
.container .left .left_top{
  width: 100%;
  height: 30vh;
  padding: 5px;
  margin-top: 3vh;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .left .left_mid{
  width: 100%;
  height: 35vh;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .left .left_bottom{
  width: 100%;
  height: 30vh;
  padding: 7px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .mid{
  width: 40%;
  height: 100vh;
}
.container .mid .title{
  width: 100%;
  height: 5vh;
  margin-top: 5px;
}
.container .mid .mid_top{
  width: 100%;
  height: 35vh;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .mid .mid_mid{
  width: 100%;
  height: 40vh;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .mid .mid_bottom{
  width: 100%;
  height: 25vh;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .right{
  width: 30%;
  height: 100vh;
}
.container .right .right_top{
  width: 100%;
  height: 32vh;
  padding: 5px;
  box-sizing: border-box;
  margin-top: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .right .right_mid{
  width: 100%;
  height: 32vh;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .right .right_bottom{
  width: 100%;
  height: 33vh;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>